<template>
	<view class="box">
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
				<image src="../../static/caifubeifen_slices/lujing9.png" mode="" class="back" @click="toDetails">
				</image>
			</view>
			<view class="head-title">
				<view class="vtitle">{{$data.$language.atitle}}</view>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language" @click="openMask">
				</image>
			</view>
		</view>
		<view class="headBg">
			<view class="transfer" @click="tranAccBtn">
				{{$data.$language.tranAcc}}
			</view>
			<view class="accounts" @click="RechargeBtn">
				{{$data.$language.Recharge}}
			</view>
			  
			<view class="line1">
				<view class="total">
					<!-- {{$data.$language.dtest}} -->
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
					          <view>{{ array[index].name }}</view>
					</picker>
					<image src="../../static/qianbaobeifen2_slices/jiantou.png" mode=""></image>
				</view>
				<!-- <image src="../../static/qianbaobeifen2_slices/jiantou.png" mode=""></image> -->
				<!-- <view class="mobx-text">
					{{$data.$language.levelCar}}：{{levelSl}}
				</view> -->
			</view>
			<view class="line2">
				<view class="word1">
					<span v-if="index==2" style="font-size: 32rpx;margin-right: 8rpx;">{{$data.$language.numberList}}:</span>
					{{count_usdt}}
				</view>
				<view class="word2" v-if="index!=2">
					USDT
				</view>
				<view class="word1" v-if="index==2">
					<span style="font-size: 32rpx;margin-right: 8rpx;">{{$data.$language.worth}}: </span>{{(parseInt(count_usdt*wone_usdt*100)/100).toFixed(2)}}
					<span style="margin-left: 8rpx;font-size: 28rpx;">USDT</span>
				</view>
			</view>
			<view class="line3">

			</view>
			<view class="line4">
				<view class="word1">{{$data.$language.aword1}}</view>
				<view class="word2">{{$data.$language.aword2}}</view>
				<view class="word3">{{$data.$language.aword3}}</view>
			</view>
			<view class="line5">
				<view class="word1">
					<view class="number">
						{{type0}}
					</view>
					<view class="letter">USDT</view>
				</view>
				<view class="word2">
					<view class="number">
						{{type1}}
					</view>
					<view class="letter">USDT</view>
				</view>
				<view class="word3">
					<view class="number">
						{{type2}}
					</view>
					<view class="letter">USDT</view>
				</view>
			</view>
		</view>
		<view class="allList">
			<view class="classify">
				<u-tabs :list="list1" @click="click"></u-tabs>
			</view>
			<view class="allDetails">
				<view v-if="logdata.length>0">
					<view class="detail1" v-for="(item,index) in logdata" :key="index">
						<view class="kilstview">
							<image src="../../static/caifubeifen_slices/usdtimgs.png" v-if="item.f_type==0" mode=""></image>
							<image src="../../static/caifubeifen_slices/woneimgs.png" v-else mode=""></image>
							<view class="middle">
								<view class="letter" v-if="item.f_type==0">
									USDT
								</view>
								<view class="letter" v-else>
									WONE
								</view>
								<view class="date">
									{{ formatTime(item.createtime)}}
								</view>
							</view>
						</view>
						
						<view class="right">
							<view class="number">
								+{{item.money}}
							</view>
							<view class="word" v-if="item.type==0">
								{{$data.$language.aword1}}
							</view>
							<view class="word" v-else-if="item.type==1">
								{{$data.$language.aword2}}
							</view>
							<view class="word" v-else-if="item.type==2">
								{{$data.$language.aword3}}
							</view>
						</view>
					</view>
				</view>

				<view style="text-align: center;padding: 48px;" v-else>
					{{$data.$language.Ticnda}}
				</view>

				<!-- <view class="detail1 detail2">
					<image src="../../static/钱包详情_slices/bianzu.png" mode=""></image>
					<view class="middle">
						<view class="letter">
							USDT
						</view>
						<view class="date">
							06/25 09:41
						</view>
					</view>
					<view class="right">
						<view class="number">
							+{{type1}}
						</view>
						<view class="word">
							动态收益
						</view>
					</view>
				</view>

				<view class="detail1 detail2">
					<image src="../../static/钱包详情_slices/bianzu.png" mode=""></image>
					<view class="middle">
						<view class="letter">
							USDT
						</view>
						<view class="date">
							06/25 09:41
						</view>
					</view>
					<view class="right">
						<view class="number">
							+{{type2}}
						</view>
						<view class="word">
							节点分红
						</view>
					</view>
				</view>

				<view class="detail1 detail2">
					<image src="../../static/钱包详情_slices/bianzu.png" mode=""></image>
					<view class="middle">
						<view class="letter">
							USDT
						</view>
						<view class="date">
							06/25 09:41
						</view>
					</view>
					<view class="right">
						<view class="number">
							+{{type0}}
						</view>
						<view class="word">
							静态收益
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view style="width: 100%;height: 50rpx;">

		</view>
	</view>
</template>

<script>
	import drawer from "../../my-components/drawer/drawer.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
	import {
		getBonus,
		getMyteam,
		getMYsix
	} from '@/api/index.js';
	export default {
		data() {
			return {
				 array: [{ name: '总资产',count_usdt:0 }, { name: 'USDT',count_usdt:0 }, { name: 'WONE',count_usdt:0 }],
				 index: 0,
				// $language: uni.getStorageSync('locale') == 'en-US' ? enUS : zhCN,
				isDrawerOpen: false,
				isOpenMask: false,
				code: '',
				msg: '',
				time: '',
				count_usdt: '',
				type0: '',
				type1: '',
				type2: '',
				logdata: [],

				list1: [{
					name: uni.getStorageSync('locale') == 'en-US' ? 'Whole' : '全部',
				}, {
					name: uni.getStorageSync('locale') == 'en-US' ? 'Static gains' : '靜態收益',
				}, {
					name: uni.getStorageSync('locale') == 'en-US' ? 'Dynamic returns' : '動態收益',
				}, {
					name: uni.getStorageSync('locale') == 'en-US' ? 'Node dividend' : '節點分紅',
				}, ],
				itemindex: '99',
				page: 1,
				levelSl: '',
				Shoetrue: true,
				wone_usdt:0,
				indexshoebox:0,

			}
		},
		// computed: {
		//    getTypeContent() {
		//      if (this.logdata.data.type === '0') {
		//        return '静态收益'; // 根据类型 A 返回的内容
		//      } else if (this.logdata.data.type === '1') {
		//        return '动态收益'; // 根据类型 B 返回的内容
		//      } else if(this.logdata.data.type === '2'){
		//        return '节点收益'; // 默认情况下返回的内容
		//      }
		//    }
		//  },
		onReachBottom() {
			console.log('滑动到距离底部100px的时候触发,可以放 。。业务逻辑');
			this.onlisrse()
		},
		onLoad() {
			var translate = uni.getStorageSync('locale')
			if (translate == 'en-US') {
				this.$data.$language = enUS
			} else if (translate == 'zh-CN') {
				this.$data.$language = zhCN
			} else {
				this.$data.$language = trCN
			}
			this.array[0].name = this.$data.$language.dtest
			this.loadData()
			this.monxlist()
		},
		methods: {
			// 获取自己资料
			loagistxs() {
				getMYsix((data) => {
						console.log(data.data)
						this.indexshoebox = data.data.parent_id
					},
					(errorMsg) => {
						var that = this
						uni.clearStorage()
						this.getcurentAddress()
						// 处理请求失败或错误的情况
						console.error(errorMsg);
					}
				);
			},
			  bindPickerChange: function(e) {
			            this.index = e.detail.value;
						// console.log(this.index)
						this.count_usdt = this.array[this.index].count_usdt
			    },
			tranAccBtn() {
				console.log('mmmm')
				uni.navigateTo({
					url: '/pages/tranAcc/tranAcc'
				});
			},
			RechargeBtn() {
				if(this.indexshoebox == 0 || this.indexshoebox == '' || this.indexshoebox ==null || this.indexshoebox == undefined){
					var jjfihbi = this.$data.$language.jjfihbi
					uni.showToast({
						title:jjfihbi,
						icon:"none",
						duration:2000,
					})
					return
				}else{
					uni.navigateTo({
						url: '/pages/Recharge/Recharge'
					});
				}
				
			},
			monxlist() {
				getMyteam({
						page: ''
					},
					(data) => {
						// 处理成功返回的数据
						this.levelSl = data.level
					},
					(errorMsg) => {
						// 处理请求失败或错误的情况
						console.error(errorMsg);
					}
				);
			},
			refreshLanguage(locale) {
				if (locale === 'zh-CN') {
					this.$language = zhCN
				} else if (locale === 'en-US') {
					this.$language = enUS
				} else {
					this.$language = trCN
				}
				uni.reLaunch({
					url: '/pages/walletAll/walletAll'
				});

			},
			formatTime(timestamp) {
				const date = new Date(timestamp*1000);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				const seconds = date.getSeconds();

				const formattedDate = `${month}/${day} ${hours}:${minutes}`;
				return formattedDate;
			},
			toDetails() {
				uni.navigateTo({
					url: '/pages/details/details'
				})
			},
			openDrawer() {
				this.isDrawerOpen = true
			},
			closeDrawer() {
				this.isDrawerOpen = false
			},
			openMask() {
				this.isOpenMask = true
			},
			closeMask() {
				this.isOpenMask = false; // 遮罩层guanbi事件处理
			},
			loadData() {
				getBonus({
						type: this.itemindex,
						page: this.page
					},
					(data) => {
						// 处理成功返回的数据
						// this.count_usdt = parseInt(data.count_usdt).toFixed(2)
						this.array[0].count_usdt = data.count_usdt
						this.array[1].count_usdt = data.usdt
						this.array[2].count_usdt = data.wone
						this.count_usdt = data.count_usdt
						this.type0 = data.type0
						this.type1 = data.type1
						this.type2 = data.type2
						this.logdata = data.log.data
						this.wone_usdt = data.wone_usdt
						console.log(this.logdata, 'this.logdata');

					},
					(errorMsg) => {
						// 处理请求失败或错误的情况
						console.error(errorMsg);
					}
				);
			},
			onlisrse() {
				if (this.Shoetrue) {
					this.page++
					getBonus({
							type: this.itemindex,
							page: this.page
						},
						(data) => {
							// 处理成功返回的数据
							// this.count_usdt = parseInt(data.count_usdt).toFixed(2)
							// this.count_usdt = data.count_usdt
							// this.type0 = data.type0
							// this.type1 = data.type1
							// this.type2 = data.type2
							// this.logdata = data.log.data

							if (this.logdata.length == data.log.total) {
								this.Shoetrue = false
							}
							this.logdata.push(...data.log.data);
							console.log(this.logdata, '分页数据');

						},
						(errorMsg) => {
							// 处理请求失败或错误的情况
							console.error(errorMsg);
						}
					);
				}

			},
			click(item) {
				console.log('item', item);
				if (item.index == '0') {
					this.itemindex = 99
				} else if (item.index == '1') {
					this.itemindex = 0
				} else if (item.index == '2') {
					this.itemindex = 1
				} else if (item.index == '3') {
					this.itemindex = 2
				}
				this.Shoetrue = true
				this.page = 1
				this.loadData()
				// getBonus({
				// 		type: this.itemindex,
				// 		page: this.page
				// 	},
				// 	(data) => {
				// 		// 处理成功返回的数据
				// 		this.count_usdt = parseInt(data.count_usdt).toFixed(2)
				// 		this.type0 = data.type0
				// 		this.type1 = data.type1
				// 		this.type2 = data.type2
				// 		this.logdata = data.log.data
				// 		console.log(this.logdata, 'this.logdata');

				// 	},
				// 	(errorMsg) => {
				// 		// 处理请求失败或错误的情况
				// 		console.error(errorMsg);
				// 	}
				// );
			},
			// cAll(item){
			// 	if(item.index == '0'){
			// 	this.itemindex = 99
			// 	}
			// 	console.log(this.itemindex,'itemindex');
			// }
		},

		components: {
			drawer,
			languageMask
		}
	}
</script>

<style lang="less">
	.box {
		width: 750rpx;
	}

	.head {
		padding: 40rpx;
	}

	.headline {
		display: flex;
	}

	.title {
		width: 164rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;
		margin: 28.85rpx 0 0 158rpx;
	}

	.headBg {
		width: 702rpx;
		// height: 330rpx;
		padding-bottom: 44rpx;
		box-sizing: border-box;
		background: linear-gradient(90deg, #034ED4 0%, #4286F4 100%);
		border-radius: 16rpx;
		margin: 0 0 0 24rpx;
		overflow: hidden;
		position: relative;
	}

	.headBg .transfer {
		position: absolute;
		top: 32rpx;
		right: 24rpx;
		/* width: 102rpx; */
		height: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;
		color: #0762FF;
		font-size: 24rpx;
		padding: 0 24rpx;
		z-index: 9;
	}

	.headBg .accounts {
		position: absolute;
		top: 104rpx;
		right: 24rpx;
		/* width: 102rpx; */
		height: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;
		color: #0762FF;
		font-size: 24rpx;
		padding: 0 24rpx;
		z-index: 9;
	}


	.line1 {
		display: flex;
		position: relative;

	}

	.line1 .mobx-text {
		position: absolute;
		top: 30rpx;
		right: 24rpx;
		color: #FFFFFF;
	}

	.line1 .total {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CEDDF7;
		line-height: 40rpx;
		margin: 30rpx 0 0 36rpx;
		position: relative;

		image {
			width: 34rpx;
			height: 34rpx;
			position: absolute;
			top: 50%;
			right: -36rpx;
			transform: translateY(-50%);
			margin: 0 !important;
		}
	}

	.line1 image {
		height: 11.2rpx;
		width: 14.34rpx;
		margin: 38rpx 0 0 4rpx;
	}

	.line2 {
		width: 580rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.line2 .word1 {
		/* width: 212rpx; */
		height: 54rpx;
		font-size: 48rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 56rpx;
		margin: 16rpx 0 0 32rpx;
	}

	.line2 .word2 {
		/* width: 98rpx; */
		height: 32rpx;
		font-size: 28rpx;
		font-family: ArialMT;
		color: #FFFFFF;
		line-height: 32rpx;
		margin: 34rpx 0 0 10rpx;
	}

	.line3 {
		width: 638rpx;
		height: 2rpx;
		border-top: 1rpx solid #CEDDF7;
		margin: 30rpx 0 0 32rpx;
	}

	.line4 {
		display: flex;
	}

	.line4 .word1 {
		/* width: 96rpx; */
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CEDDF7;
		line-height: 34rpx;
		margin: 30rpx 0 0 32rpx;
	}

	.line4 .word2,
	.line4 .word3 {
		width: 96rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #CEDDF7;
		line-height: 34rpx;
		margin: 30rpx 0 0 148rpx;
	}

	.line5,
	.line5 .word1,
	.line5 .word2,
	.line5 .word3 {
		display: flex;
	}

	.line5 .word1,
	.line5 .word2 {
		width: 188rpx;
		height: 34rpx;
	}

	.line5 .word1 {
		margin: 28rpx 0 0 32rpx;
	}

	.line5 .word2 {
		margin: 28rpx 0 0 56rpx;
	}

	.line5 .word3 {
		width: 158rpx;
		height: 34rpx;
		margin: 28rpx 0 0 50rpx;
	}

	.line5 .word1 .number,
	.line5 .word2 .number,
	.line5 .word3 .number {
		font-size: 32rpx;
		font-family: Arial Bold;
		font-weight: BoldMT;
		color: #FFFFFF;
		line-height: 36rpx;
	}

	.line5 .word1 .letter,
	.line5 .word2 .letter,
	.line5 .word3 .letter {
		font-size: 20rpx;
		font-family: Arial;
		color: #FFFFFF;
		line-height: 36rpx;
		margin: 4rpx 0 0 6rpx;
	}

	.allList {
		min-height: 1018.33rpx;
		width: 702rpx;
		margin: 76rpx 0 0 24rpx;
	}

	.classify {
		display: flex;
	}

	.classify .word1 {
		width: 142rpx;
		/* height: 44rpx; */
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2C2C2C;
		/* line-height: 44rpx; */
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.classify .word2,
	.classify .word3,
	.classify .word4 {
		width: 142rpx;
		/* height: 44rpx; */
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #919191;
		/* line-height: 44rpx; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.classify .word2 {
		margin-left: 20rpx;
	}

	.classify .word3 {
		margin-left: 36rpx;
	}

	.classify .word4 {
		margin-left: 38rpx;
	}

	.shortLine {
		width: 32rpx;
		height: 6rpx;
		background: #0762FF;
		margin: 10rpx 0 0 54rpx;
	}

	.allDetails {
		width: 702rpx;
		min-height: 958rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		overflow: hidden;
		padding-bottom: 44rpx;
		box-sizing: border-box;
	}

	.detail1 {
		display: flex;
		justify-content: space-between;
		height: 72rpx;
		margin-top: 40rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
	}
	.kilstview{
		display: flex;
	}
	.detail1 image {
		width: 74rpx;
		height: 76rpx;
		margin: 0rpx 0 0 0rpx;
	}

	.middle .letter {
		width: 128rpx;
		height: 32rpx;
		font-size: 28rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 32rpx;
		margin: 4rpx 0 0 18rpx;
	}

	.middle .date {
		width: 188rpx;
		height: 28rpx;
		font-size: 24rpx;
		font-family: ArialMT;
		color: #939393;
		line-height: 28rpx;
		margin: 12rpx 0 0 18rpx;
	}

	.right .number {
		// width: 168rpx;
		height: 34rpx;
		font-size: 32rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 36rpx;
		// margin-left: 230rpx;
		text-align: right;
	}

	.right .word {
		// width: 296rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #959AA7;
		line-height: 34rpx;
		text-align: right;
		margin: 4rpx 0 0 0rpx;
	}

	.detail2 {
		margin-top: 70rpx;
	}

	.hengT:after {
		content: "";
		width: 32rpx;
		height: 6rpx;
		background: #0762FF;
		margin-top: 10rpx;
	}
</style>